<template>
  <div class="account" v-bind:style="{'height':clientHeight + 'px'}">
    <div class="account-name">
      <span>WIFI名称</span>
      <input  v-model="name" type="text" onkeyup="this.value=this.value.replace(/[^\w_]/g,'');" :placeholder="name" v-show="receiveAccount">
      <!-- <input  value="" ref="content" type="text"  v-show="!receiveAccount" v-model="name">
       <div class="account-editor" @click="edit" >修改</div>-->
    </div>
    <hr>
    <div class="account-name">
      <span>WIFI密码</span>
      <input value="" type="text" onkeyup="this.value=this.value.replace(/[^\w_]/g,'');" placeholder="输入8-14位"  v-show="receivePassword" v-model="password">
      <!--<input value="" type="text" placeholder="输入8-14位" v-show="!receivePassword"  ref="password" v-model="password">
      <div class="account-editor" @click="editPassword">修改</div>-->
    </div>
    <div class="input-button blue" @click="editIE">确定</div>
    <div class="input-button white" @click="$router.back(-1)">返回</div>
  </div>
</template>
<!--
  先把input 锁住， 点击修改，打开input的锁，并且聚焦到对应input框
-->
<script>
import {VXMDFDEVNAME, VXMDFDEVPWD} from '../../api/request'
import { Toast, Confirm } from 'vue-ydui/dist/lib.rem/dialog'
export default {
  name: 'index',
  data () {
    return {
      clientHeight: document.documentElement.clientHeight,
      receiveAccount: true,
      receivePassword: true,
      name: '',
      vid: '',
      password: ''
    }
  },
  created () {
    this.name = this.$route.query.name
    this.vid = this.$route.query.devid
    this.password = this.$route.query.pwd
  },
  methods: {
    edit: function () {
      let that = this
      that.receiveAccount = false
      console.log(this.name)
      setTimeout(function () {
        that.$refs.content.focus()
      }, 20)
    },
    editPassword: function () {
      let that = this
      that.receivePassword = false
      setTimeout(function () {
        that.$refs.password.focus()
      }, 20)
    },
    editIE: function () {
      if (this.name === '') {
        Toast({mes: '请设置wifi名', timeout: 1000})
      } else if (this.password === '' || this.password.length < 8 || this.password.length > 14) {
        Toast({mes: '请输入8-14位的密码', timeout: 1000})
      } else {
        Confirm({
          mes: '是否确认修改',
          opts: () => {
            VXMDFDEVNAME(this.$store.getters.uid, this.vid, this.name).then(
              res => {
                if (res.data.code === 200) {
                  VXMDFDEVPWD(this.$store.getters.uid, this.vid, this.password).then(
                    res => {
                      if (res.data.code === 200) {
                        Toast({mes: '修改成功，请重启设备', timeout: 1000})
                        setTimeout(this.$router.go(-1), 1000)
                      } else {
                        Toast({mes: res.data.msg, timeout: 1000})
                      }
                    },
                    error => {
                      console.log(error)
                    })
                } else {
                  Toast({mes: res.data.msg, timeout: 1000})
                }
              },
              error => {
                console.log(error)
              })
          }
        })
      }
    }
  }
}
</script>

<style scoped>
  .account {
    width: 100%;
    margin-top: 0.2rem;
    background-color: #ebebeb;
  }
  .account-name{
    height: 0.94rem;
    line-height: 0.94rem;
    font-size: 0.36rem;
    border-bottom: 1px solid #ebebeb;
    padding-left: 0.4rem;
    padding-right: 0.34rem;
    background-color: #fff;
  }
  .account-name span{
    color: #a09f9f;
  }
  .account-name input {
    width: 4rem;
    text-align: right;
    float: right;
    color: #333;
    line-height: 0.9rem;
  }

  .account-editor{
    float: right;
    border-radius: 0.1rem;
    height: 0.44rem;
    width: 0.98rem;
    font-size: 0.24rem;
    line-height: 0.44rem;
    margin-top: 0.24rem;
    color: #129cfd;
    border: #129cfd 1px solid;
    text-align: center;
  }
  .white{
    background-color: #fff;
    color: #0092f8;
    box-shadow: 0 0 0.2rem 0.1rem rgba(194, 198, 199, 0.1);
    border-radius: 0.1rem;
    margin-top: 0.4rem;
  }
  .blue{
    margin-top: 1.4rem;
    box-shadow: 0 0 0.2rem 0.1rem rgba(194, 198, 199, 0.1);
    border-radius: 0.1rem;
    background-color: #0092f8;
  }
</style>
